//两个新的生命周期钩子
路由组件独享的两个钩子，用于捕获路由组建的激活状态
activated() {//被激活的
  
},
deactivated() {
  //失活的
},


//路由守卫(对组件进行权限控制)
有全局前置
router.beforeEach((to, from, next) => {
  // to and from are both route objects. must call `next`.
})


有全局后置
router.router.afterEach((to, from) => {
  // to and from are both route objects.
})
有独享路由守卫
router.beforeEnter: (to, from, next) => {
  // ...
}
有组件内路由守卫
beforeRouteEnter (to, from, next) {
  //通过路由规则，进入该组件就被调用
}
beforeRouteLeave (to, from, next) {
  // 通过路由规则，离开该组件就被调用
}

//hash模式跟history模式
mode:'hash',
mode:'history'


//vuex(组件间的数据共享)

//state（提供唯一公共的数据源）有两种触发方式
第一种方式
1)在index中创建一个state对象
state:{
  count:0
}
2)组件去触发state
直接触发
{{this.$store.count}}

第二种方式
引入一个mapState
import {mapState} from 'vuex'映射在computed计算属性中
computed:{
  ...mapState(['count'])
}

触发
{{count}}


//mutation（变更state数据）
也有两种触发方式
第一种
1）在index中定义
mutations:{
  add(state){
    state.count++
  }
}
2)触发
add1(){
  this.$store.commit('add')
}

//依赖 axios
ui组件库ant-design-vue
main.js
import Antd from 'ant-desing-vue'
import 'ant-design-vue/dist/antd.css'
Vue.ust(Antd)

list:[]

放进list.json

created(){
  this.$store.dispatch('getList')
}
computed:{
  ...mapState(['list','listValue'])
}
methods:{
  handInput(e){
   consolee.log(e.target.value)
   this.$store.commit('setInput')
  },
  addItemtolist(){
    if(!this.listValue.trim().length <=0){
      return this.$message.warning('文本框问题不能为空')
    }
  }，

  this.$store.commit('addTtem')
}

state:{
  list:[]
  listValue:'aaa'
}

mutations:{
  initlist(state,list){
    state.list = list
  },
  setInput(state,val){
    state.inputValue = val
  },
  addTtem(){
    const ovj = {
      id:state.nexId,
      info:state.listValue.trim()
      done:false
    },
    state.list.push(ovj)
    state.nextId++
    state.inputValue = 
  }
}
action:[
  getList(context){
    axios.get('/list.json').then(({data}) => {
      console.log(data)
      context.commit('initlist')
    })
  }
]






//axious
不同类型的请求及其作用
1，GET：从服务器端读取数据
2，POST：向服务器端添加新数据
3，PUT：更新服务器端已经数据
4，DELETE：删除服务器端数据




function testGet(){
  axios.get('http://localhost:3000/posts')
  .then(response => {
     console.log('/posts',response.data)
  })
}

浏览器端发请求，只有XHR或fetch发出的才是ajax请求，其他所有的都是非ajax请求
浏览器端接收到响应
1）一般请求：浏览器一般会直接显示响应体数据，也就是我们常说的刷新/跳转页面
2）ajax请求：浏览器不会对界面进行任何更新操作，只是调用监视的回调函数并传入响应相关数据

XHR的API
0，初始
1，open()之后
2，send()之后
3，请求中
4，请求完成
5,onreadystatechange:绑定readyState改变的监听
6，responseType:制定相应数据类型，如果是json,得到响应后自动解析响应体数据
7，response：响应体数据，类型取决于responseType的指定
8，timeout：指定请求超时时间，默认为0代表没有限制
9，ontimeout：绑定超时的监听



3，函数的参数为一个配置对象
{
  url:'',//请求地址
  method:'',//请求方式GET/POST/PUT/DELETE
  params:{},//GET/DELETE请求的query参数
  data:{},//POST或DELETE请求的请求体参数
}
4，响应json数据自动解析为js
function axios({
  url,
  method='GET',
  params = {},
  data={}
}){
  //返回一个promise对象
  return new Promise((resolve,reject) =>{
    
  })
}

axious({
  url:'/xxx'
})











function axios({
  url:'',
  method='GET',
  params={},
  data={}
}){
  //返回一个promise对象
  return new Promise((resolve,reject) => {
//执行异步ajax请求
//创建xhr对象
const request = new XMLHttpRequest()
//打开连接（初始化请求，没有请求）
request.open(method,url,true)
//发送请求
if(method === 'GET'){
  request.send()
}else if(method === 'POST'){
  request.setRequestHeader('Content-Type','application/json';charset=utf-8)
  //发送json请求体参数
  request.send(JSON.stringify(data))
}

  })
}